<template>
  <div class="oauth-callback">
    <div class="loading-container">
      <el-card class="loading-card">
        <div class="loading-content">
          <el-icon class="loading-icon" :size="40">
            <Loading />
          </el-icon>
          <h2>{{ loadingText }}</h2>
          <p>{{ statusMessage }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

export default {
  name: 'OAuthCallbackView',
  components: {
    Loading
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const loadingText = ref('正在处理登录...')
    const statusMessage = ref('请稍候，正在验证您的身份')

    const processOAuthCallback = async () => {
      try {
        // 从URL参数中获取数据
        const token = route.query.token
        const re_token = route.query.re_token
        const user_id = route.query.user_id
        const username = route.query.username
        const phone = route.query.phone
        const email = route.query.email
        const platform = route.query.platform

        console.log('OAuth回调参数:', {
          token,
          re_token,
          user_id,
          username,
          phone,
          email,
          platform
        })

        if (!token) {
          throw new Error('未获取到登录令牌')
        }

        // 保存用户信息到localStorage
        localStorage.setItem('token', token)
        localStorage.setItem('retoken', re_token || '')
        localStorage.setItem('userInfo', JSON.stringify({
          user_id,
          username,
          phone,
          email,
          platform
        }))

        loadingText.value = '登录成功！'
        statusMessage.value = `欢迎回来，${username || '用户'}！正在跳转...`

        ElMessage.success(`${platform || '第三方'}登录成功`)

        // 延迟跳转到首页
        setTimeout(() => {
          router.push('/')
        }, 1500)

      } catch (error) {
        console.error('OAuth回调处理失败:', error)
        loadingText.value = '登录失败'
        statusMessage.value = error.message || '登录处理失败，请重试'

        ElMessage.error('登录失败，请重试')

        // 延迟跳转到登录页
        setTimeout(() => {
          router.push('/login')
        }, 2000)
      }
    }

    onMounted(() => {
      processOAuthCallback()
    })

    return {
      loadingText,
      statusMessage
    }
  }
}
</script>

<style scoped>
.oauth-callback {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.loading-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.loading-card {
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.loading-content {
  padding: 40px 20px;
}

.loading-icon {
  color: #409eff;
  animation: spin 2s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

h2 {
  color: #303133;
  margin-bottom: 10px;
  font-size: 24px;
}

p {
  color: #606266;
  font-size: 14px;
  margin: 0;
}
</style> 